<template>
    <div class="wrapper">
        <van-nav-bar
          title="订单列表"
          left-text="返回"
          right-text="搜索"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
        >
            <van-icon name="search" slot="right" />
        </van-nav-bar>
        <van-tabs color="#74BA42"  v-model="active" animated :swipeable="true">
            <van-tab title="订单">
                <div class="box">
                    <div class="card-item" v-for="(item,i) in orderDetails" :key="i">
                        <div class="card-title">
                            <div class="shopImg">
                                <img src="../images/shop_logo_01.jpg" alt="">
                            </div>
                            <router-link tag="dl" to="/login">
                                <dt>绿茵生鲜 <van-icon style="font-size:14px;" name="arrow" /></dt>
                                <dd class="tagIcon">
                                    <van-tag style="margin-right:5px;" color="#f2826a" plain>拼团</van-tag>
                                    <van-tag color="#f2826a" plain>满减</van-tag>
                                </dd>
                            </router-link>
                        </div>
                        <div class="card-body">
                            <div class="card-body-item" v-for="(val,i)  in item " :key="i">
                                <span>
                                    <van-image
                                      width="70"
                                      height="56"
                                      :src="val.product.coverImg"
                                    />
                                </span>
                                <span>{{val.product.name}}</span>
                                <span>{{'单价 : '+val.product.price}}</span>
                                <span>{{'数量 : '+val.quantity}}</span>
                            </div>
                        </div>
                        <div class="card-footer">
                            <span>总数量</span>
                            <span>总价格</span>
                        </div>
                        <van-button plain type="primary" @click="tap()">点击查看详情 &gt;&gt;</van-button>
                    </div>
                </div>
            </van-tab>
            <van-tab title="评价">
                <div class="box">
                    
                </div>
            </van-tab>
            <van-tab title="退货">
                <div class="box">
                    
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import * as api from '@/api/order'
export default {
    name:'OrderList',
    data(){
        return{
            active:'',
            orderList_a:[],
            orderDetails:[],
        }
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1)
        },
        onClickRight(){
            console.log(1)
        },
        tap(){
            console.log(this.orderDetails)
            // this.$router.push('/orderdetail')
        }
    },
    mounted(){
        api.getOrders({per:4,page:1}).then(data=>{
            this.orderList_a = data.data.orders
            console.log(this.orderList_a)
            let arr = []
            this.orderList_a.map(v=>{
                api.getOrderDetail(v._id).then(res=>{
                    console.log(res.data.details)
                    arr.push(res.data.details)
                    this.orderDetails = arr
                })
            })
        })
    }
}
</script>

<style scoped>
.wrapper{
    display: flex;
    height:100vh;
    flex-direction: column;
}
.van-nav-bar{
    font-family: "微软雅黑";
}

.van-nav-bar__left >>> .van-nav-bar__text,.van-nav-bar .van-icon,.van-nav-bar .van-nav-bar__title{
    color:rgb(116, 186, 66);
}
.van-icon-search{
    font-size:20px;
}
.van-tabs{
    flex:1;
}
.box{
    height:100%;
    width:100%;
    padding:20px 16px 0;
    background:#fff;
    box-sizing: border-box;
}
.card-item{
    min-height:100px;
    border-radius:10px;
    box-shadow:0 5px 10px #ddd;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 14px;
    margin-bottom:20px;
}
.shopImg img{
    width:100%;
    transform:scale(1.8);
    margin-top:10px;
}
.card-title{
    min-height:58px;
    border-bottom:1px solid #aaa;
    margin-top:10px;
    display: flex;
}
.card-title .shopImg{
    width:38px;
    height:38px;
    border-radius:4px;
    margin-right:10px;
    overflow: hidden;
}
.card-title dl dt{
    font-size:16px;
    line-height: 1;
    margin-bottom: 6px;
}
.card-title dl dt .van-icon{
    color:#999;
}
.card-body{
    padding-top:14px;
}
.card-body span{
    float:left;
    line-height: 56px;
    color:#333;
    font-size:12px;
}
.card-body-item{
    height:56px;
    margin-bottom:18px;
}
.card-body-item span:nth-of-type(n+3){
    float:right;
    display: block;
    color:#999;
}
.card-body-item span:nth-of-type(1){
    width:70px;
    height:56px;
    background:#aaa;
    margin-right:18px;
}
.card-body-item span:nth-of-type(3){
    margin-left:10px;
}
.card-footer{
    text-align:right;
    color:#333;
    margin-bottom:16px;
}
.card-footer span:nth-of-type(1){
    margin-right:10px;
    font-size:12px;
}
.card-footer span:nth-of-type(2){
    font-size:20px;
}
.van-button{
    float:right;
    border-radius:10px;
    color:#66B32E;
    border-color:#66B32E;
    margin-bottom:14px;
}
</style>


